<template>
  <div>
    <!-- 工资明细 -->
    <a-drawer :width="550" title="工资明细" placement="right" :closable="false" :visible="show" @close="$emit('update:show', false)">
      <a-button class="pos" @click="editor = !editor">编辑</a-button>
      <div class="salary-body">
        <div class="salary-title">基本信息</div>
        <a-form-item class="ta-left" label="姓名" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
          <a-input v-model="detialData.empName" :disabled="editor" />
        </a-form-item>
        <a-form-item class="ta-left" label="部门" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
          <a-input v-model="detialData.depName" :disabled="editor" />
        </a-form-item>
        <a-form-item class="ta-left" label="职位" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
          <a-input v-model="detialData.positionName" :disabled="editor" />
        </a-form-item>
        <div class="salary-title">薪资信息</div>
        <a-form-item label="基本工资" class="ta-left" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="detialData.salaryBasic" :disabled="editor" />
        </a-form-item>
        <a-form-item label="岗位补贴" class="ta-left" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="detialData.subsidy" :disabled="editor" />
        </a-form-item>
        <a-form-item label="应出勤天数" class="ta-left" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="detialData.workingDays" :disabled="editor" />
        </a-form-item>
        <a-form-item label="缺勤天数" class="ta-left" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="detialData.absenteeismTimes" :disabled="editor" />
        </a-form-item>
        <a-form-item label="缺勤扣款" class="ta-left" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="detialData.absenteeismDed" :disabled="editor" />
        </a-form-item>
        <a-form-item label="绩效奖金" class="ta-left" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="detialData.businessCommission" :disabled="editor" />
        </a-form-item>
        <a-form-item label="业绩提成" class="ta-left" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="detialData.teamCommission" :disabled="editor" />
        </a-form-item>
        <a-form-item label="个人社保" class="ta-left" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="detialData.socDed" :disabled="editor" />
        </a-form-item>
        <a-form-item label="个人公积金" class="ta-left" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="detialData.pfDed" :disabled="editor" />
        </a-form-item>
        <a-form-item label="个税" class="ta-left" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="detialData.personTax" :disabled="editor" />
        </a-form-item>
        <a-form-item label="应发工资" class="ta-left" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="detialData.supplementDed" :disabled="editor" />
        </a-form-item>
        <a-form-item label="实发工资" class="ta-left" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-input v-model="reportOptions.salaryReal" :disabled="editor" />
        </a-form-item>
      </div>

      <div class="drawer-foot foot">
        <a-button style="marginRight: 8px" @click="onCancle">取消</a-button>
        <a-button type="primary" @click="onOk">确认</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { Wages, WagesSet } from "@/api/wages";

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    reportOptions: {},
    detialData: {}
  },
  data() {
    return {
      // 编辑
      editor: true
    };
  },

  methods: {
    // 确认数据
    onOk() {
      Wages({
        url: WagesSet.salaryDetial,
        method: "PUT",
        data: {}
      }).then(({ data }) => {});

      this.$emit("update:show", false);
    },
    // 取消
    onCancle() {
      this.$emit("update:show", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.pos {
  position: absolute;
  top: 10px;
  right: 26px;
}
.salary-title {
  padding: 16px 40px;
  font-weight: 600;
}
.drawer-foot {
  padding: 10px;
  text-align: right;
}
.ant-form-item-label {
  text-align: left;
}
</style>
